<template>
  <el-dialog ref="dialog" :title="title" :visible.sync="visible" :width="width" :top="top" :model="model"
             :modalAppendToBody="modalAppendToBody" :show-close="false"
             :fullscreen="fullscreen" :closeOnClickModal="closeOnClickModal" :destroyOnClose="destroyOnClose"
             @open="open" @close="close"
             append-to-body v-dialogDrag :class="{'fullscreen':fullscreen}">
    <div slot="title">
      <span style="font-size: 18px;">{{ title }}</span>
      <button type="button" class="el-dialog__headerbtn" aria-label="Fullscreen" style="right: 50px;"
              @click="handleFullscreen">
        <svg-icon icon-class="全屏" fill-color="#909399" style="height: 20px;width: 20px;"></svg-icon>
      </button>
      <button type="button" class="el-dialog__headerbtn" aria-label="Fullscreen" style="right: 20px;"
              @click="handleClose">
        <svg-icon icon-class="关闭" fill-color="#909399" style="height: 20px;width: 20px;"></svg-icon>
      </button>
    </div>
    <slot></slot>
    <template slot="footer">
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'index',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '50%'
    },
    top: {
      type: String,
      default: '15vh'
    },
    model: {
      type: Boolean,
      default: true
    },
    modalAppendToBody: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    open: {
      type: Function,
      default: function () {

      }
    },
    close: {
      type: Function,
      default: function () {

      }
    },
  },
  data() {
    return {
      fullscreen: false,
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleFullscreen() {
      this.fullscreen = !this.fullscreen;
      debugger
      if (this.fullscreen) {
        this.$refs.dialog.style.left = 0;
        this.$refs.dialog.style.top = 0;
      }
    }
  }
}
</script>

<style scoped>

</style>
